﻿@inherits TablesBase
@page "/tables/autorefresh"

<h3>自动刷新表格功能</h3>

<h4>在某种应用场景中，数据源的变化需要重新刷新表格组件</h4>

<Block Title="自动刷新" Introduction="本示例演示在后台线程中对数据源进行监控，当数据源变化时通知表格组件进行数据刷新" CodeFile="table.33.html">
    <p>通过设置 <code>IsAutoRefresh</code> 属性值来开启自动刷新功能，<code>AutoRefreshInterval</code> 属性值默认为 2000 毫秒，此值为自动刷新时间间隔，周期性调用组件的 <code>QueryAsync</code> 方法使表格具有自动刷新功能</p>
    <p>本例中每间隔 2 秒钟数据增加一条新数据并保持最多 10 条数据</p>
    <Table TItem="BindItem"
           IsPagination="true" PageItemsSource="@(new int[] { 2, 4 })"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           IsAutoRefresh="true" AutoRefreshInterval="2000"
           OnQueryAsync="@OnRefreshQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Complete">
                <Template Context="v">
                    <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
                </Template>
            </TableColumn>
        </TableColumns>
    </Table>
</Block>
